<template>
  <div class="lg:w-1/4 scroll-animate" style="animation-delay: 0.1s">
    <div class="bg-white rounded-xl shadow-md p-6 sticky top-24">
      <h3 class="font-bold text-lg text-primary mb-5 pb-3 border-b border-gray-100">全部分类</h3>

      <!-- 分类列表 -->
      <ul class="space-y-1 mb-8">
        <li v-for="category in categories" :key="category.id">
          <button
            class="category-item w-full flex items-center justify-between p-3 rounded-lg transition-all duration-200"
            :class="{
              'bg-primary/10 text-primary font-medium': selectedCategoryId === category.id,
            }"
            @click="$emit('category-change', category.id)"
          >
            <div class="flex items-center">
              <i :class="category.icon" class="mr-3 text-lg"></i>
              <span>{{ category.name }}</span>
            </div>
            <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">
              {{ category.count }}
            </span>
          </button>
        </li>
      </ul>

      <!-- 年代筛选 -->
      <EraFilter :selected-eras="selectedEras" @era-change="$emit('era-change', $event)" />

      <!-- 价格区间筛选 -->
      <PriceRangeFilter
        :selected-ranges="selectedPriceRanges"
        @range-change="$emit('price-range-change', $event)"
      />

      <!-- 筛选重置 -->
      <button
        class="mt-8 w-full py-2 border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors"
        @click="$emit('reset-filters')"
      >
        重置筛选条件
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue'
import EraFilter from './EraFilter.vue'
import PriceRangeFilter from './PriceRangeFilter.vue'
import { type Category } from '../type'

// 定义props
const props = defineProps<{
  categories: Category[]
  selectedCategoryId: number
  selectedEras: string[]
  selectedPriceRanges: string[]
}>()

// 定义事件
const emit = defineEmits<{
  (e: 'category-change', id: number): void
  (e: 'era-change', eras: string[]): void
  (e: 'price-range-change', ranges: string[]): void
  (e: 'reset-filters'): void
}>()
</script>

<style scoped>
.category-item {
  text-align: left;
}

.category-item:hover {
  background-color: rgba(26, 54, 93, 0.05);
}

.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.text-primary {
  color: var(--primary);
}
</style>
